<template>
<el-drawer class="drawer" :title="formDrawer.title" :visible.sync="formDrawer.visible" direction="rtl" custom-class="drawer-right-side" size="50%" :before-close="closeDrawer" :append-to-body="true">
    <div class="audit-detail-group">
        <audit-head-vue :audit="audit" :flow="flow"></audit-head-vue>
        <audit-order-vue v-if="keys.includes('Order')" :order="products['Order']"></audit-order-vue>
        <template v-if="keys.includes('OrderProduct')">
            <audit-product-vue v-for="(item, key) in products['OrderProduct']" :key="key" :product="item"></audit-product-vue>
        </template>
        <audit-additional-vue v-if="keys.includes('OrderAdditional')" :additional="products['OrderAdditional']"></audit-additional-vue>
        <audit-protocol-vue v-if="keys.includes('OrderProtocol')" :protocol="products['OrderProtocol']"></audit-protocol-vue>
        <audit-income-vue v-if="keys.includes('OrderIncome')" :income="products['OrderIncome']"></audit-income-vue>
        <audit-payment-vue v-if="keys.includes('OrderPay')" :payment="products['OrderPay']"></audit-payment-vue>
        <audit-process-vue :process="process" :current="current" @doRefresh="getCheckRes"></audit-process-vue>
    </div>

    <div class="fix-bottom" v-if="isShow" style="width: 50vw;">
        <el-button type="warning" icon="el-icon-share" @click="showShareView">转交</el-button>
        <el-button type="danger" icon="el-icon-switch-button" @click="doCheck(2)">驳回</el-button>
        <el-button type="primary" icon="el-icon-check" @click="doCheck(1)">通过</el-button>
    </div>

    <audit-handle ref="auditHandleRef" @doRefresh="getCheckRes"></audit-handle>
    <share-view ref="shareView" @submit="doShare"></share-view>
</el-drawer>
</template>

<script>
import {
    getResultApi,
    auditTransferApi
} from "@/api/audit/index";

// import shareView from '@/components/picker/share.vue';
// import auditHeadVue from './components/audit-head.vue';
// import auditOrderVue from './components/audit-order.vue';
// import auditProductVue from './components/audit-product.vue';
// import auditAdditionalVue from './components/audit-additional.vue';
// import auditProtocolVue from './components/audit-protocol.vue';
// import auditIncomeVue from './components/audit-income.vue';
// import auditPaymentVue from './components/audit-payment.vue';
// import auditProcessVue from './components/audit-process.vue';
// import auditHandle from "./components/audit-handle.vue";

export default {
    name: "AuditDetail",
    components: {
        shareView: () => import('@/components/picker/share.vue'),
        auditHeadVue: () => import('./components/audit-head.vue'),
        auditOrderVue: () => import('./components/audit-order.vue'),
        auditProductVue: () => import('./components/audit-product.vue'),
        auditAdditionalVue: () => import('./components/audit-additional.vue'),
        auditProtocolVue: () => import('./components/audit-protocol.vue'),
        auditIncomeVue: () => import('./components/audit-income.vue'),
        auditPaymentVue: () => import('./components/audit-payment.vue'),
        auditProcessVue: () => import('./components/audit-process.vue'),
        auditHandle: () => import('./components/audit-handle.vue'),
    },
    data() {
        return {
            formDrawer: {
                title: "审核",
                visible: false,
            },
            keys: [],
            audit_no: "",
            auditFlowId: "",
            audit: {
                status: "",
                creator: {
                    id: "",
                    realname: "",
                },
                tag: {
                    id: "",
                    title: "",
                },
            },
            user: {
                id: "",
                realname: "",
            },
            products: {},
            process: [],
            flow: {
                auditor: {
                    id: '',
                    realname: '',
                }
            },
            current: 0,
        };
    },
    computed: {
        isShow() {
            if (this.flow.status > 0 || this.flow.audit_user_id != this.user.id) {
                return false;
            } else {
                return true;
            }
        }
    },
    methods: {
        showDrawer(audit_no) {
            this.formDrawer.visible = true;
            this.audit_no = audit_no;
            this.getCheckRes();
        },
        getCheckRes() {
            let params = {
                audit_no: this.audit_no,
            };
            getResultApi(params).then((res) => {
                this.audit = res.data.audit;
                this.formDrawer.title = this.audit.tag.title + '审批';

                let flow = res.data.flow;
                this.flow = flow;
                this.auditFlowId = flow.id;
                this.user = res.data.user;
                this.current = res.data.current;
                this.process = res.data.process;
                this.products = res.data.products;
                this.keys = Object.keys(res.data.products);
            });
        },
        closeDrawer() {
            this.formDrawer.visible = false;
        },
        doCheck(type) {
            this.$refs['auditHandleRef'].showDialog(this.auditFlowId, type);
        },
        showShareView() {
            this.$refs['shareView'].showDialog();
        },
        doShare(userIds) {
            if (userIds.length > 1) {
                this.$message.warning("只能转给一个人");
                return;
            };

            let options = {};
            options['audit_flow_id'] = this.flow.id;
            options['user_id'] = userIds[0];

            auditTransferApi(options).then(res => {
                if (res.code == 200) {
                    this.$message.success(res.msg);
                    this.getCheckRes();
                } else {
                    this.$message.error(res.msg);
                }
            })
        },
    },
};
</script>

<style lang="less" scoped>
.drawer {
    .audit-detail-group {
        padding: 0 12px 80px;

        /deep/ .panel {
            margin-bottom: 20px;
        }
    }

    .fix-bottom {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        padding: 12px;
        background-color: #f8f8f8;
        display: flex;
        justify-content: space-around;
    }

}
</style>
